<template>
  <div class="home">
    <div style="padding-bottom: 50px">
      <router-link :to="{ name: 'themes', query: { name: 't-1' } }">
        <div class="theme">
          <img class="theme" :src="topimg" />
        </div>
      </router-link>
      <!-- 轮播广告 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in imglist" :key="index">
          <img :src="image.img" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 宫格菜单 -->
      <van-grid class="grid" :column-num="3" :border="false">
        <van-grid-item
          v-for="(item, index) in caregorylist"
          :key="item.id"
          :text="item.name"
          style="font-size: 30px"
          :to="{ name: 'categorylist', query: { id: item.id, isRoot: true } }"
        >
          <!-- <i :class="albbicon[index]" class="iconfont"></i> -->
          <div class="aa">
            <svg class="icon" aria-hidden="true">
            <use :xlink:href="`#${albbicon[index]}`"></use>
          </svg>
          <span>{{item.name}}</span>
          </div>
        </van-grid-item>
      </van-grid>
      <!-- 商品列表 -->
      <GoodsListVue ref="goodslist"></GoodsListVue>
    </div>
    <NavBarVue></NavBarVue>
  </div>
</template>

<script>
import "@/assets/font_2943783_tefxe4eipwq/iconfont.css";
import NavBarVue from "@/components/NavBar.vue";
import GoodsListVue from "./GoodsList.vue";
export default {
  name: "Home",
  data() {
    return {
      toptitle: "",
      topname: "",
      topimg: "",
      imglist: [],
      caregorylist: [],
      albbicon: [
        "icon-baobao1",
        "icon-gongyipin1",
        "icon-fuzhuang",
        "icon-shenghuoyongpin-",
        "icon-huodonglipin",
        "icon--jujia",
      ],
    };
  },
  created() {
    this.getImgInfo();
    this.getGridMenu();
  },
  methods: {
    getImgInfo() {
      this.$http.get("http://localhost:8080/theme/detail/t-1").then((res) => {
        this.topname = res.data.name;
        this.toptitle = res.data.title;
        this.topimg = res.data.entranceImg;
      });
      this.$http.get("http://localhost:8080/poster/name/p-1").then((res) => {
        this.imglist = res.data.items;
      });
    },
    getGridMenu() {
      this.$http.get("http://localhost:8080/category/grid").then((res) => {
        this.caregorylist = res.data;
      });
    },
  },
  components: {
    NavBarVue,
    GoodsListVue,
  },
};
</script>

<style scoped>
.aa{
  display: flex;
  font-size: 30px;
  flex-direction: column;
}
.aa span{
  font-size: 10px;
}
.home {
  background-color: rgba(241, 230, 230, 0.747);
}
.theme {
  height: 180px;
}
.theme-img {
  max-height: 100%;
  width: 100%;
}
.van-swipe-item {
  height: 300px;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
.grid {
  background: white;
  border-radius: 10px;
  border: 2px solid rgb(60, 41, 46);
  padding-top: 13px;
  padding-bottom: 13px;
  margin: 15px 15px;
  height: 170px;
}
.iconfont {
  color: rgb(111, 139, 145);
  width: 2em;
  height: 0em;
}
</style>
